<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-09-12 12:02:13
 * @FilePath: \ylwl\src\demos\dialog.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div>utils 测试</div>
  <el-button @click="testShow">弹窗js </el-button>
  <el-button @click="testShow2">弹窗直接引用</el-button>
  {{ show }}
  <M-Dialog
    ref="test"
    v-model="show"
    :modal="true"
    :show-close="true"
    :btns="btns"
    title="自定义的标题"
  >
    <template #default> <h3>我是直接写的SFC插槽</h3></template>
  </M-Dialog>
</template>
<script setup lang="ts">
import { ref, reactive, Ref, h, getCurrentInstance, render } from 'vue'
import Utils from '@@/utils/index'
import { MpDialog } from '../../packages/plugins/index.ts'
import { onMounted } from 'vue'
import InDialog from './inDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const test = ref(null)
const show = ref<boolean>(false)
// const testContent = ref<any>(vdom)
console.log(InDialog)

const testShow = () => {
  // console.log('MpDialog', MpDialog)
  MpDialog.show({
    id: 'testShow',
    title: '第一个弹窗的标题',
    content: InDialog,
    mode: 'drawer',
    props: {},
    btns: [
      {
        label: '保存',
        value: 'sure',
        onClick: (next, data) => {
          ElMessage.success('保存成功')
          alert(JSON.stringify(data))
          next()
        }
      }
    ],
    dialogProps: {
      width: '50%',
      top: '10px',
      beforeClose: (next: () => void) => {
        ElMessageBox.confirm(
          'proxy will permanently delete the file. Continue?',
          'Warning',
          {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }
        )
          .then(() => {
            next()
          })
          .catch(() => {})
      }
    }
  })
}
const testShow2 = () => {
  show.value = true
  // debugger
}
const btns = ref([
  {
    label: '测试',
    value: 'test',
    onClick: (next, data) => {
      ElMessage.success('保存成功')
      alert(JSON.stringify(data))
      next()
    }
  }
])
onMounted(() => {
  // console.log('test', test.value.onSure)
  // const lot = document.getElementById('test')
  // lot && render(vdom, lot)
  // debugger
})
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
